Il linguaggio HTML: introduzione, struttura e creazione di documenti

Documento dall'Università sull'introduzione al linguaggio HTML. Il Pdf, utile per lo studio autonomo di Informatica a livello universitario, copre la definizione, la struttura e la creazione di documenti HTML, inclusi link e immagini.

Mostra di più

14 pagine

HTML
1
Il linguaggio HTML
in poche pagine…
HTML
2
Il linguaggio HTML
L’HTML (Hyper Text Markup Language) è un linguaggio di markup, cioè di descrizione
della pagina, molto semplice, che non richiede alcuna conoscenza della programmazione.
Un documento HTML è un file di testo contenente la codifica di una pagina, e può quindi
essere creato utilizzando un qualunque editor testuale.
L’HTML è stato creato con l’obiettivo di essere indipendente dal dispositivo di
visualizzazione: il suo scopo originario era quello di descrivere la struttura di un documento,
non l’aspetto (compito lasciato al browser). Ma il WWW si è diffuso molto rapidamente... il
linguaggio è stato quindi via via modificato per includere anche descrizioni della
formattazione, contro l’intento originale dei suoi creatori...
Come molte delle tecnologie relative al Web, anche l’HTML è definito dal World Wide Web
Consortium (W3C, http://www.w3.org), un’associazione internazionale guidata da Tim
Berners-Lee (l’inventore del Web) che si occupa della creazione di standard e linee guida.

Visualizza gratis il Pdf completo

Registrati per accedere all’intero documento e trasformarlo con l’AI.

AccediRegistrati gratis

Anteprima

Il linguaggio HTML

Il linguaggio HTML in poche pagine ... 1HTML Il linguaggio HTML L'HTML (Hyper Text Markup Language) è un linguaggio di markup, cioè di descrizione della pagina, molto semplice, che non richiede alcuna conoscenza della programmazione. Un documento HTML è un file di testo contenente la codifica di una pagina, e può quindi essere creato utilizzando un qualunque editor testuale. L'HTML è stato creato con l'obiettivo di essere indipendente dal dispositivo di visualizzazione: il suo scopo originario era quello di descrivere la struttura di un documento, non l'aspetto (compito lasciato al browser). Ma il WWW si è diffuso molto rapidamente ... il linguaggio è stato quindi via via modificato per includere anche descrizioni della formattazione, contro l'intento originale dei suoi creatori ... Come molte delle tecnologie relative al Web, anche l'HTML è definito dal World Wide Web Consortium (W3C, http://www.w3.org), un'associazione internazionale guidata da Tim Berners-Lee (l'inventore del Web) che si occupa della creazione di standard e linee guida. 2HTML

I tag e la struttura

I tag definiscono gli elementi strutturali di un documento HTML: specificano cioè come sarà visualizzata la porzione di testo che includono, quali connessioni ci devono essere ad altri documenti, quali immagini o elementi multimediali devono essere visualizzati, ecc. I tag sono racchiusi in parentesi angolari (es. < body>,

, ... ) e, in genere, si usano a coppie: ogni tag di apertura ha associato un corrispondente tag di chiusura, il cui nome è preceduto da una barra (es .: < head> e , e ). La figura seguente mostra la struttura base di un documento HTML, corrispondente ad una pagina Web. Sezione HEAD Documento . . . Corpo della pagina . . . Il tag dichiara che il file contiene codice HTML; il tag identifica la sezione "introduttiva" del documento; il tag specifica un titolo per il documento (che appare nella barra del titolo del browser); il tag <body> definisce il corpo del documento (cioè ciò che effettivamente appare nella pagina). Se si utilizzano tag scorretti, che non appartengono all'HTML, i browser solitamente li mostrano, con il testo racchiuso in essi, così come sono scritti. 3HTML</p> <h2>Titoli e paragrafi</h2> <p>Nell'HTML esistono sei tipologie di titoli (heading), da <h1> (più importante) a <h6> (meno importante). I titoli forniscono solo un'informazione semantica sul contenuto, ed è lo specifico browser a decidere il tipo di visualizzazione da adottare. File Modifica Visualizza Preferit » » Indietro x Indirizzo e tml V Vai Collegamenti 1 Titolo H1 Titolo H2 Titolo H3 Titolo H4 Titolo H5 <H6>Titolo H6</H6> THelo H6 Risorse del computer I paragrafi specificano il testo "normale" di un documento, e sono definiti attraverso il tag <p>. Fornendo anch'essi soltanto un'informazione di tipo semantico sul contenuto, il modo in cui sono visualizzati dipende dal particolare browser: in genere, comunque, viene sempre lasciata una riga vuota prima di essi. È da sottolineare che nell'HTML (tranne che per un'eccezione che si vedrà in seguito) gli spazi e i ritorni a capo vengono sempre ignorati, e il testo si adatta allo spazio disponibile. <HTML> <HEAD> <TITLE>Prova paragrafi

Il colore arricchisce la nostra vita come una naturale esperienza visiva; capire il colore ci aiuta a sfruttarlo in maniera efficace.

Per percepire il colore, devono essere presenti tre elementi essenziali: la luce, un oggetto illuminato e un ossevatore.

2 Prova paragrafi X Ele Modifica Visualizza Preferiti Strumenti 2 Indietro x Indirizzo @]esktopldacanc.html Vai Collegamenti Il colore arricchisce la nostra vita come una naturale esperienza visiva; capire il colore ci aiuta a sfruttarlo in maniera efficace. Per percepire il colore, devono essere presenti tre elementi essenziali: la luce, un oggetto illuminato e un ossevatore. el Operazione c Risorse del computer 4 »

Titolo H1

Titolo H2

Titolo H3

Titolo H4

Titolo H5
HTML

Liste e testo preformattato

L'HTML prevede tre tipi di liste (che possono anche essere annidate una dentro l'altra):

  • liste non numerate: tag
      (identificativo della lista) e
    • (identificativo di ciascun elemento);
    • liste numerate: tag
        (identificativo della lista) e
      1. (identificativo di ciascun elemento);
      2. liste di definizione: tag
        (identificativo della lista),
        (voce di definizione) e
        (definizione).

    Come per i titoli e i paragrafi, l'esatta modalità di visualizzazione delle liste è lasciata al browser. x File Modifica Visualizza Preferiti Strumenti 2 2 Indietro Cerca Preferiti Indirizzo C:\Documents and Settings\Marco PortalDesl Val Collegamenti

      · Gennaio · Febbraio · Marzo 1. Gennaio
    • Gennaio
      • 2. Febbraio 3. Marzo Browser Programma per la visualizzazione di pagine Web Operazione completata Risorse del computer Anche se normalmente gli spazi e i ritorni a capo sono ignorati dall'HTML, è possibile fare in modo che vengano considerati, attraverso il tag 
      . Il testo inserito in tale tag viene
infatti visualizzato esattamente così com'è (cosa che risulta particolarmente utile nel caso di
pagine che contengono codice di programmazione o di markup, dove la disposizione del testo
è importante).
a
X
File
Modifica
Visualizza
Preferiti
Strume
Indietro
x
Indirizzo
C:\Documents
V
Vai
Collegamenti

      
while (a > b) {
a = a - 1;
if (a == c) {
found = true;
c = 0;
}
while (a > b) {
a = a - 1;
if (a == c) {
found = true;
c = 0;
}
}

      
Operazi
Risorse del computer

    • Gennaio
      • 

    • Febbraio
      • 

    • Marzo
      •
    KOL>
  • Febbraio
  • Marzo
    • Browser
    Programma per la visualizzazione di pagine Web
    » » } 5HTML

    Line break, barre orizzontali e sequenze di escape

    Un ritorno a capo può essere forzato con il tag
    (che non necessita di alcun tag di chiusura, non includendo porzioni di documento). Il tag

    (anch'esso senza tag di chiusura) inserisce nel documento una barra orizzontale; con gli attributi size e width si può specificare lo spessore della linea e la sua lunghezza (gli attributi sono proprietà associate a specifici tag, che permettono di definirne le caratteristiche; vengono inclusi all'interno dei tag stessi, con la sintassi nomeattributo="valoreattributo"). Le sequenze di escape sono stringhe formate dal carattere & seguito da un codice e dal punto e virgola. Uno degli scopi delle sequenze di escape è quello di permettere l'inserimento nella pagina di "caratteri speciali", che non possono essere utilizzati direttamente perché hanno un significato particolare per l'HTML (ad esempio < e >). Sono però importanti anche per i caratteri che non appartengono all'alfabeto inglese, come le lettere accentate, garantendo che siano visualizzati correttamente anche su macchine che non hanno installato il supporto per la lingua di appartenenza. × File Modifica Visualizza Preferiti Strumenti ? Indietro x Cerca » Indirizzo Porta\Desktop\dacanc.html > Vai Collegamenti Il colore arricchisce la nostra vista come una naturale esperienza visiva. La luce è un'onda elettromagnetica. Poiché la luce bianca ... Operazione completat Risorse del computer

    Il colore
    arricchisce la nostra vista come una naturale esperienza visiva.

    La luce è un'onda elettromagnetica. Poiché la luce bianca ...

    < = < > = > & = & è = è é = é È = È ã = ã   = spazio 6HTML

    Link ipertestuali

    I link sono elementi della pagina (tipicamente porzioni di testo o immagini) che, quando cliccati, caricano nuovi documenti (pagine HTML o elementi ipermediali); ad ogni link è associato un certo URL, specificato come valore dell'attributo href. La struttura di un link è: < a href="URL">elemento che diventa un link. Esempio: Cerca con Google Naturalmente, se il documento da caricare si trova sullo stesso server del documento che contiene il link, il valore di href sarà il percorso, relativo o assoluto, che porta a tale documento (e non sarà necessario includere http:// nel valore di href). Ad esempio: Lezione 1 indica un link al file l1.html che, rispetto alla directory in cui si trova il file contenente il link che si sta definendo, è contenuto nella sottodirectory lezioni. Il valore di href può anche essere un indirizzo e-mail, e in tal caso il click sul link provoca l'apertura automatica dell'eventuale client di posta predefinito. Esempio: Marco Porta

    La nascita del Web

    Il Web è nato nel 1989 da un'idea di Tim Berners-Lee, un ricercatore del CERN di Ginevra.

    Contattami per saperne di più ! × File Modifica Visualizza Preferiti Strumenti ? Indietro O Cerca Preferiti Indirizzo C:\Documents and Settin V Va Collegamenti Norton AntiVirus La nascita del Web Il Web è nato nel 1989 da un'idea di Tim Berners-Lee, un ricercatore del CERN di Ginevra. . A cosa servono i siti Web . Come si crea un sito Web . Il Browser Contattami per saperne di più! e Risorse del computer 7HTML

    Inclusione di immagini nella pagina

    In una pagina Web è possibile inserire immagini in formato GIF, JPEG e PNG, attraverso il tag (che non richiede il tag di chiusura). Il valore dell'attributo src indica l'URL del file dell'immagine da visualizzare (che, in maniera analoga agli URL dei link, può trovarsi sullo stesso server del file HTML o su un server esterno). Gli attributi width e height (opzionali) specificano, rispettivamente, la larghezza e l'altezza dell'immagine, e sono utili perché indicano al browser la dimensione dell'area rettangolare che conterrà l'immagine, ancora prima che questa venga scaricata. Ad esempio: visualizza l'immagine miaimg. gif, larga 257 pixel e alta 120 pixel, che si trova nella stessa directory del file HTML che la contiene. Per un'immagine è spesso utile indicare anche "testo alternativo". L'attributo alt permette di specificare una descrizione testuale dell'immagine, che viene visualizzata quando il cursore del mouse è sopra di essa. L'attributo longdesc definisce invece una descrizione più lunga, utile soprattutto se la pagina deve essere letta da un browser vocale. Una pagina Web

    Inserimento di immagini nelle pagine

    Ecco un'immagine !< /P>

    Una pagina Web X File Modifica Visualizza Preferiti Strumenti ? Indietro x Cerca Preferiti Indirizzo C:\Documents and Settings \Marco Por Vai Collegamenti » Norton AntiVirus < Inserimento di immagini nelle pagine Ecco un'immagine! Un fiore Operazione completata Risorse del computer Quando è inserita nel tag , un'immagine diventa un link e, quando cliccata, carica la pagina indicata dall'attributo href. Approfondimenti: l'attributo align permette di specificare la posizione dell'eventuale testo inserito immediatamente dopo un'immagine (che sarà visualizzato alla sua destra). In particolare, il default è align="bottom", che fa sì che la prima riga del testo venga allineata alla base dell'immagine, mentre le righe successive vengono poste sotto di essa. Con align="top" la prima riga è allineata alla parte superiore dell'immagine, mentre le successive vengono poste sotto di essa. Con align="center", infine, la prima riga è allineata al centro dell'immagine, e le successive appaiono sempre sotto di essa. Come si vedrà in seguito, anche se l'attributo align può essere utile in alcuni casi, per ottenere allineamenti più "sofisticati" è meglio utilizzare strutture tabulari. 8

Non hai trovato quello che cercavi?

Esplora altri argomenti nella Algor library o crea direttamente i tuoi materiali con l’AI.